import React, { useState, useEffect } from 'react'
// import { useNavigate } from 'react-router-dom'
import { useNavigate } from 'react-router-dom'

import 'animate.css';
import '../css/community.css'






import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:3000/'

export default function Community_jing() {
  let navigate = useNavigate()
  let [com_list, setcom_list] = useState([])


  let getlist = async () => {
    let { data: { list } } = await axios.get('Userlist')
    setcom_list(list)
    console.log(list);
  }


  useEffect(() => {
    getlist()
  }, [])

  return (
    <div>

      <div >

        {
          com_list.map((item, index) => {
            return <div key={index} className='comm_xuan animate__animated animate__fadeInRight' >
              <div className='comm_list1'>
                <div>
                  <img className='comm_tou' src={`http://127.0.0.1:3000/upload${item.userprofile}`} alt="" />
                </div>

                <div className='comm_1'>
                  <div className='comm_Vip'>
                    <h4>{item.username}</h4>
                    <span>{item.usercar}</span>

                  </div>
                  <p className='comm_1_2'>{item.usertext}</p>
                  <p className='comm_1_1'>{item.userqian}</p>
                </div>

                <p className='comm_1_3'>{item.usertitle}</p>
                <div className='comm_1_4'>
                  <img src="/21x.png" alt="" />
                </div>
              </div>
              <div>

              </div>
              <div>
                {item.userid.length === 5 && <div className='comm_img'>
                  {
                    item.userid.map((ele, _id) => {
                      return <div key={_id}>
                        <img id={`id${_id}`} src={`http://127.0.0.1:3000/upload${ele.userimg}`} alt="" />
                      </div>
                    })
                  }
                </div>}
                <div>
                  {item.userid.length === 1 && <div className='comm_video'>
                    {
                      item.userid.map((e, _id) => {
                        return <div key={_id}>
                          <video controls className='comm_video1' src={`${e.userimg}`}></video>
                        </div>
                      })
                    }
                  </div>}
                </div>
                <div>
                  {item.userid.length === 4 && <div className='comm_img4'>
                    {
                      item.userid.map((ee, _id) => {
                        return <div key={_id}>
                          <img id={`id${_id}`} src={`http://127.0.0.1:3000/upload${ee.userimg}`} alt="" />
                        </div>
                      })
                    }
                  </div>}
                </div>
              </div>


            </div>
          })
        }
      </div>
      <div>
        <div className='xuanfu'>
          <span onClick={()=>{navigate('/add')}}>+</span>
        </div>
      </div>
    </div>
  )
}
